<template>
  <ul class="navs">
    <li>
      <a
        href="javascript:;"
        @click="pitchOn(1)"
        :class="1 === indexOption ? 'pointer-bg' : ''"
        >发现音乐<sub class="pointer" :class="1 !== indexOption ? 'none' : ''"
          >&nbsp;</sub
        ></a
      >
    </li>
    <li>
      <a
        href="javascript:;"
        @click="pitchOn(2)"
        :class="2 === indexOption ? 'pointer-bg' : ''"
        >我的音乐<sub class="pointer" :class="2 !== indexOption ? 'none' : ''"
          >&nbsp;</sub
        ></a
      >
    </li>
    <li>
      <a
        href="javascript:;"
        @click="pitchOn(3)"
        :class="3 === indexOption ? 'pointer-bg' : ''"
        >关注<sub class="pointer" :class="3 !== indexOption ? 'none' : ''">&nbsp;</sub></a
      >
    </li>
    <li>
      <a
        href="javascript:;"
        @click="pitchOn(4)"
        :class="4 === indexOption ? 'pointer-bg' : ''"
        >商城<sub class="pointer" :class="4 !== indexOption ? 'none' : ''">&nbsp;</sub></a
      >
    </li>
    <li>
      <a
        href="javascript:;"
        @click="pitchOn(5)"
        :class="5 === indexOption ? 'pointer-bg' : ''"
        >音乐人<sub class="pointer" :class="5 !== indexOption ? 'none' : ''"
          >&nbsp;</sub
        ></a
      >
    </li>
    <li>
      <a
        href="javascript:;"
        @click="pitchOn(6)"
        :class="6 === indexOption ? 'pointer-bg' : ''"
        >下载客户端<sub class="pointer" :class="6 !== indexOption ? 'none' : ''"
          >&nbsp;</sub
        >
        <sub class="hot">&nbsp;</sub>
      </a>
    </li>
  </ul>
</template>

<script>
import { ref } from "vue";
export default {
  name: "NavOptions",
  setup() {
    let indexOption = ref(1);
    function pitchOn(value) {
      indexOption.value = value;
    }

    return {
      indexOption,
      pitchOn,
    };
  },
};
</script>

<style scoped lang="less">
.navs {
  float: left;
  li {
    float: left;
    height: 70px;
    .pointer-bg {
      background: #000000;
      color: #fff;
    }
    a {
      display: block;
      position: relative;
      height: 100%;
      padding: 0 19px;
      line-height: 70px;
      font-size: 14px;
      color: #ccc;
      &:hover {
        text-decoration: none;
        background-color: #000000;
        color: #fff;
      }
    }
  }
}
.pointer {
  position: absolute;
  left: 50%;
  margin-left: -6px;
  bottom: -1px;
  width: 12px;
  height: 7px;
  background: url("../../../common/images/topbar.png") no-repeat -226px 0;
}
.hot {
  position: absolute;
  top: 21px;
  left: 100px;
  width: 28px;
  height: 19px;
  background: url("../../../common/images/topbar.png") no-repeat -190px 0;
}
</style>
